<template>
	<view class="mxg-code center" @click="sendSmsCode">
		<text class="code-btn" >
			{{codeDuration > 0 ? codeDuration+'s':  '获取验证码'}}
		</text>
	</view>
</template>

<script>
  //定时器变量，用于控制验证码倒计时
	let interval = null

	import api from '@/api/system.js'

	export default {

		props: {
			mobile: {
				type: String,    
				default: ''     
			},
			templateCode: {
				type: String,   
				default: ''      
			}
		},

		data() {
			return {
				codeDuration: 0
			}
		},

		methods: {

      // 发送验证码方法
			async sendSmsCode() {

				// 如果正在倒计时，则提示用户稍后重试
				if(this.codeDuration) {
					uni.showModal({
						content: `请在${this.codeDuration}秒后重试`,  // 显示剩余时间
						showCancel: false  // 不显示取消按钮
					})
					return 
				}

				// 校验手机号格式是否正确
				if(!this.$util.checkStr(this.mobile, 'mobile')) {
					this.$util.msg('手机号码格式不正确') 
					return
				}

				// 检查新手机号是否与当前绑定的手机号相同
				if(this.$store && this.mobile === this.$store.state.userInfo.mobile) {
					this.$util.msg('新手机号与当前绑定的手机号不能相同')  
					return
				}

				try{
					// 显示加载提示
					uni.showLoading({
						mask: true  // 显示遮罩层
					})

					const data = {mobile: this.mobile, templateCode: this.templateCode}

          // 调用发送短信验证码接口
					const res = await api.sendSmsCode(data)
					uni.hideLoading()

					this.$util.msg(res.message)
					if(res.code !== 20000) return

					this.codeDuration = 60
					// 设置定时器，每秒更新倒计时
					interval = setInterval(() => {
						this.codeDuration--  // 倒计时减1
						// 如果倒计时结束，清除定时器
						if(this.codeDuration === 0) {
							clearInterval(interval)  // 清除定时器
							interval = null          // 重置定时器变量
						}
					}, 1000)
				}catch(e){
					uni.hideLoading()
					this.$util.msg('验证码发送失败')
				}

			}
		}
	}
</script>

<style lang="scss">
	/* 验证码容器样式 */
	.mxg-code {
		background-color: $mxg-color-primary;  // 背景颜色
		border-radius: 10rpx;                  // 圆角
		width: 160rpx;                         // 宽度
	}

	/* 验证码按钮文本样式 */
	.code-btn {
		font-size: 25rpx;     // 字体大小
		padding: 10rpx 0;     // 垂直内边距
		color: #FFFFFF;       // 文字颜色
	}
</style>
